<template>
  <div>
    <div class="account-pages"></div>
    <div class="clearfix"></div>
    <div class="wrapper-page">
      <div class="text-center">
        <a href="index.html" class="logo">
          <span>
            The
            <span>future</span>
          </span>
        </a>
        <h5 class="text-muted m-t-0 font-600">Responsive</h5>
      </div>
      <div class="m-t-40 card-box">
        <div class="text-center">
          <h4 class="text-uppercase font-bold m-b-0">Sign In</h4>
        </div>
        <div class="panel-body">
          <form @submit.prevent="signin" class="form-horizontal m-t-20">
            <div class="form-group">
              <div class="col-xs-12">
                <input
                  class="form-control"
                  v-model="account"
                  type="text"
                  required
                  placeholder="Username"
                >
              </div>
            </div>

            <div class="form-group">
              <div class="col-xs-12">
                <input
                  class="form-control"
                  v-model="password"
                  type="password"
                  required
                  placeholder="Password"
                >
              </div>
            </div>

            <div class="form-group">
              <div class="col-xs-12">
                <div class="checkbox checkbox-custom">
                  <input id="checkbox-signup" type="checkbox">
                  <label for="checkbox-signup">Remember me</label>
                </div>
              </div>
            </div>

            <div class="form-group text-center m-t-30">
              <div class="col-xs-12">
                <button
                  class="btn btn-custom btn-bordred btn-block waves-effect waves-light"
                  type="submit"
                >Log In</button>
              </div>
            </div>
          </form>
          <div class="col-sm-12">
            <a href="page-recoverpw.html" class="text-muted">
              <i class="fa fa-lock m-r-5"></i> Forgot your password?
            </a>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-12 text-center">
            <p class="text-muted">
              Don't have an account?
              <a href="page-register.html" class="text-primary m-l-5">
                <b>Sign Up</b>
              </a>
            </p>
          </div>
        </div>
      </div>
      <!-- end card-box-->
    </div>
    <!-- end wrapper page -->
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      account: "",
      password: ""
    };
  },
  methods: {
    signin() {
      axios({
        url: this.$api + "/api/user/signin/",
        method: "post",
        withCredentials: true, // 携带set_cookie
        data: {
          account: this.account,
          password: this.password
        }
      }).then(res => {
        if (res.data.code == 0) {
          window.localStorage.setItem("token", res.data.token); // 存储Token
        //   this.$router.push({path: "/all" }); // 登陆成功 跳转首页
        window.location.href = '/all'
        }
        this.message = res.data.message;
      });
    }
  }
};
</script>